<template>
  <px-dialog v-model="visible" class="equip-dialog" :title="typeTitle" width="960px" @open="openDialog" @close="closeDialog">
    <px-form ref="formRef" :model="formValue" :rules="rules" label-position="right" label-width="120px">
      <px-form-item label="事件主题" prop="eventTopic">
        <px-input v-model="formValue.eventTopic" placeholder="请输入事件主题" maxlength="50" clearable show-word-limit />
      </px-form-item>
      <px-row :gutter="16">
        <px-col :span="12">
          <px-form-item label="发生时间" prop="happenTime">
            <px-date-picker
              v-model="formValue.happenTime"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :disabled-date="disabledDate"
              placeholder="请选择发生时间"
            /> </px-form-item
        ></px-col>
        <px-col :span="12">
          <px-form-item label="负责人" prop="managerId">
            <px-select-v2
              v-model="formValue.managerId"
              filterable
              clearable
              :options="userList"
              placeholder="请选择负责人"
              @change="userChange"
            /> </px-form-item
        ></px-col>
      </px-row>
      <px-form-item label="事件内容" prop="eventContent">
        <px-input
          v-model="formValue.eventContent"
          :autosize="{ minRows: 3, maxRows: 6 }"
          type="textarea"
          placeholder="请输入事件内容"
          maxlength="1000"
          clearable
          show-word-limit
        />
      </px-form-item>
      <px-form-item label="事件原因" prop="eventReason">
        <px-input
          v-model="formValue.eventReason"
          :autosize="{ minRows: 3, maxRows: 6 }"
          type="textarea"
          placeholder="请输入事件原因"
          maxlength="1000"
          clearable
          show-word-limit
        />
      </px-form-item>
      <px-form-item label="处理过程" prop="treatingProcesses">
        <px-input
          v-model="formValue.treatingProcesses"
          :autosize="{ minRows: 3, maxRows: 6 }"
          type="textarea"
          placeholder="请输入处理过程"
          maxlength="1000"
          clearable
          show-word-limit
        />
      </px-form-item>
    </px-form>
    <div class="equip-dialog-footer">
      <px-button @click="closeDialog">取消</px-button>
      <px-button type="primary" @click="handleSubmit(formRef)">保存</px-button>
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
import { addEventRecord, editEventRecord } from "@/api/erc/learn";
import { getEmployeeIdAndName } from "@/utils/pengxi";
import { PxMessage } from "px-ui";
import { computed, reactive, ref, toRefs } from "vue";

// 调用父级-关闭弹窗、查询列表方法
const emits = defineEmits(["closeDialog", "queryTable"]);
// 父级传过来的值
const props = defineProps(["dialogVisible", "dialogType", "dialogRow"]);
const visible = computed(() => props.dialogVisible);
// 页面本身的值
const formRef = ref();
const state = reactive<any>({
  typeTitle: "新增事件记录",
  formValue: {
    id: "",
    eventTopic: "",
    happenTime: "",
    managerId: null,
    eventContent: "",
    eventReason: "",
    treatingProcesses: ""
  },
  userList: []
});
const { formValue, typeTitle, userList } = toRefs(state);
// 表单校验规则
const rules = computed(() => ({
  eventTopic: [{ required: true, message: "事件主题不能为空", trigger: "blur" }],
  happenTime: [{ required: true, message: "发生时间不能为空", trigger: "change" }],
  managerId: [{ required: true, message: "负责人不能为空", trigger: "change" }],
  eventContent: [{ required: true, message: "事件内容不能为空", trigger: "blur" }],
  eventReason: [{ required: true, message: "事件原因不能为空", trigger: "blur" }],
  treatingProcesses: [{ required: true, message: "处理过程不能为空", trigger: "blur" }]
}));

// 禁用今天之后的日期
const disabledDate = (time: Date) => {
  return time.getTime() > new Date().getTime() - 8.64e7 + 24 * 60 * 60 * 1000;
};
// 获取审批人名称
const userChange = val => {
  const arr = userList.value.filter(item => {
    return item.value === val;
  });
  if (arr && arr.length > 0) {
    formValue.value.managerName = arr[0].label;
  }
};
// 打开弹窗
const openDialog = async () => {
  formRef.value.resetFields();
  userList.value = await getEmployeeIdAndName(["HSE", "ISEP", "ERC&FP"]);
  if (props.dialogType === "add") {
    typeTitle.value = "新增事件记录";
    delete formValue.value.id;
  } else if (props.dialogType === "edit") {
    typeTitle.value = "编辑事件记录";
    formValue.value = JSON.parse(JSON.stringify(props.dialogRow));
  }
};
// 关闭弹窗
const closeDialog = () => {
  formValue.value = {};
  emits("closeDialog");
};
// 提交
const handleSubmit = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      const params = formValue.value;
      if (props.dialogType === "add") {
        await addEventRecord(params);
        PxMessage.success("新增成功");
        emits("closeDialog");
        emits("queryTable");
      } else if (props.dialogType === "edit") {
        await editEventRecord(params);
        PxMessage.success("编辑成功");
        emits("closeDialog");
        emits("queryTable");
      }
    }
  });
};
</script>
<style lang="scss" scoped>
.equip-dialog {
  .equip-dialog-footer {
    margin-top: 12px;
    text-align: right;
  }
}

:deep(.px-input) {
  width: 100%;
}

:deep(.px-select-v2) {
  width: 100%;
}
</style>
